<template>
	<view class="videoMosk">
		<view class="videoMosk-content">
			<view class="videoMosk-content-box">
				<video @ended="EventHandle" :play-strategy='2' class="video" :loop='false' :enable-play-gesture="true"
					object-fit='contain' :controls='false' :danmu-btn=true :autoplay='false' :show-loading="false"
					:show-progress="false" :show-center-play-btn="false" :vslide-gesture-in-fullscreen="false"
					:enable-progress-gesture="false" id="myvideo" :src="video">
					<cover-image @click="playVideo()" :class="['img',  typeVide!==3&&'small'] "
						:style="{top:[2,4,8].includes(typeVide)?'35%!important':'50%!important' }"
						:src="(typeVide==3&&'../../static/icon3/grow/isPlay.png')||(typeVide!=3&&'../../static/icon3/grow/play.png')"
						mode="" v-if="isShow"></cover-image>
					<!-- v-if="showTip" -->
					<cover-view v-if="showTip" :class="['btn1', [2,4,8].includes(typeVide) ?'margin1':'']"
						@click.stop="playVideo2()"> 再看一遍 </cover-view>
					<cover-view v-if="showTip" @click.stop="playVideo2(1)"
						:class="['btn2', [2,4,8].includes(typeVide) ?'margin':'']">
						{{[4,1,2,3,8].includes(typeVide) ?'我已学习':'查看更多教学' }}
					</cover-view>
				</video>
			</view>
			<view class="videoMosk-content-close" @click='close' v-if="showIcon||typeVide==10">× </view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'studyVideo',
		props: {
			// 视频类型
			typeVide: {
				type: Number,
				default: 0
			},
			// 视频文件
			video: {
				type: String,
				default: ''
			},
			isStydu: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				videoContext: null,
				isShow: true,
				showTip: false,
				showIcon: false
			}
		},
		mounted() {
			this.videoContext = uni.createVideoContext('myvideo');
			this.videoContext.pause();
		},
		watch: {},
		methods: {
			// 开始 暂停
			playVideo() {
				if (this.isShow) {
					this.videoContext.play()
					this.isShow = false
				}
			},
			// 再看一遍
			playVideo2(e) {
				if (e) {
					if ([4, 2, 8].includes(this.typeVide)) {
						this.close()
					} else {
						uni.navigateTo({
							url: '/pages/help/help'
						})
					}
				} else {
					this.isShow = false
					this.videoContext.play()
					this.showTip = false
				}
			},
			// 关闭
			close() {
				this.$emit('toClose')
				// if (this.showTip == true || [1].includes(this.isStydu) || this.typeVide == 10) {}
			},
			// 是否看完教学视频
			isupdateStudyFlag() {
				if (![2, 4, 8].includes(this.typeVide)) this.showIcon = true
				// 新手教学 typeVide=7,  正式  typeVide=2,  金牌    typeVide=3
				if ([7, 8].includes(this.typeVide)) {
					this.$fetch(this.$api.updAllNoviceguide, 'GET')
				} else if ([3, 4, 2].includes(this.typeVide)) {
					this.$fetch(this.$api.updateStudyFlag, {}, 'POST')
				}
				// this.$emit('toClose')
			},
			// 视频播放到最后的时候触发
			EventHandle() {
				this.showTip = true
				this.isupdateStudyFlag()
			}
		},
	}
</script>
<style scoped lang="scss">
	.videoMosk {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99999999;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		backdrop-filter: blur(10rpx);

		&-content {
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			&-box {
				width: 670rpx;
				height: 1190rpx;
				border-radius: 15rpx;
				position: relative;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				.video {
					width: 100%;
					height: 1190rpx;
					border-radius: 24rpx;
					overflow: hidden;
				}
			}

			&-close {
				width: 52rpx;
				height: 52rpx;
				opacity: 1;
				border: 2rpx solid #FFF;
				border-radius: 50%;
				color: #FFF;
				text-align: center;
				line-height: 52rpx;
				margin: 80rpx auto;
			}
		}
	}

	.img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.btn2,
	.btn1 {
		width: 472rpx;
		height: 100rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(138, 157, 168, 0.5);
		border-radius: 12rpx;
		color: #000000;
		font-weight: bold;
		text-align: center;
		position: absolute;
		left: 50%;
		margin-left: -236rpx;
		line-height: 90rpx
	}

	.btn1 {
		background: linear-gradient(180deg, rgba(113, 113, 113, 0) 0%, rgba(36, 36, 36, 0.5) 100%);
		background: #FFFFFF;
		bottom: 200rpx;
	}

	.btn2 {
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 195, 13, 0.5), inset 2rpx 2rpx 0rpx 2rpx rgba(255, 255, 255, 0.39);
		background: #FCC92D;
		bottom: 88rpx;
	}

	.small {
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -52rpx;
	}

	.margin {
		bottom: 380rpx;
	}

	.margin1 {
		bottom: 250rpx;
	}
</style>